<script setup>
import { reactive, ref, onMounted } from "vue";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import { formatToDateTime } from "@/utils/dateUtil";
import {
  FlowDesignForm,
  FormDesignForm,
  FormDesignViewer,
  FlowVersionDrawer,
} from "@/components/WorkflowDesign/Index";

const formQuery = reactive({
  name: "",
});

const loading = ref(false);
const tableData = ref([]);

const pagination = reactive({
  maxResultCount: 10,
  currentPage: 1,
  total: 0,
});
// 查询
const onQuery = () => {
  pagination.currentPage = 1;
  getList();
};
const onCreate = () => {
  editFlowDesignData.visible = true;
  editFlowDesignData.value = {};
};

// 翻页
const onPageChange = () => {
  getList();
};

const editFlowDesignData = reactive({
  value: {
    id: "",
    activeVersion: 0,
    description: "",
    name: "",
  },
  visible: false,
  viewOnly: false,
});

const flowVersionData = reactive({
  value: {
    workflowId: "",
    workflowName: "",
    activeVersion: 0,
    activeFormVersion: 0,
  },
  visible: false,
});

const workflowDesignStore = useWorkflowDesignStore();

const getList = async () => {
  loading.value = true;
  const res = await workflowDesignStore.getAllWorkflows({
    name: formQuery.name,
    maxResultCount: pagination.maxResultCount,
    currentPage: pagination.currentPage,
  });
  loading.value = false;
  tableData.value = res.items;
  pagination.total = res.total;
};

onMounted(() => {
  getList();
});

const confirmDeleteItem = (row) => {
  workflowDesignStore
    .delete({
      id: row.id,
    })
    .then((res) => {
      ElMessage.success({
        type: "success",
        message: "删除成功!",
      });
      getList();
    });
};

const onFlowLock = async (row) => {
  await workflowDesignStore.lockWorkflow({
    id: row.id,
  });
  getList();
};

const showFlowVersion = (row) => {
  flowVersionData.value = {
    workflowId: row.id,
    workflowName: row.name,
    activeVersion: row.activeVersion,
    activeFormVersion: row.activeFormVersion,
  };
  flowVersionData.visible = true;
};
</script>

<template>
  <el-card shadow="never">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="formQuery" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formQuery.name" placeholder="流程名称" clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查 询</el-button>
        <el-button type="primary" @click="onCreate">新 增</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <br />
  <el-card shadow="never" v-loading="loading">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称" width="350"> </el-table-column>
      <el-table-column prop="workflowType" label="分类" width="80"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>

      <el-table-column prop="modifiedTime" label="更新时间" width="200">
        <template #default="scope">
          {{ formatToDateTime(scope.row.modifiedTime) }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="流程版本" width="100">
        <template #default="scope">
          <el-tooltip content="版本切换" placement="bottom" effect="light">
            <el-button
              type="text"
              :plain="true"
              @click="showFlowVersion(scope.row)"
              size="normal"
            >
              v{{ scope.row.activeVersion }}
            </el-button>
          </el-tooltip>
          &nbsp;
          <!-- <el-tooltip content="预览" placement="bottom" effect="light">
            <el-link
              :underline="false"
              type="primary"
              size="normal"
              @click="showFlowVersion(scope.row)"
            >
              <ElIcon><View /></ElIcon>
            </el-link>
          </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column prop="name" label="表单版本" width="100">
        <template #default="scope">
          <el-tooltip content="表单版本管理" placement="bottom" effect="light">
            <el-button
              type="text"
              @click="showFlowVersion(scope.row)"
              plain
              size="normal"
            >
              <span v-if="scope.row.activeFormVersion > 0"
                >v{{ scope.row.activeFormVersion }}</span
              >
              <span v-else>
                <el-icon><plus /></el-icon>
              </span>
            </el-button>
          </el-tooltip>
          &nbsp;
          <!-- <el-tooltip content="预览" placement="bottom" effect="light">
            <el-link
              v-if="scope.row.activeFormVersion > 0"
              :underline="false"
              type="primary"
              size="normal"
              @click="showFlowVersion(scope.row)"
            >
              <ElIcon><View /></ElIcon>
            </el-link>
          </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column prop="" label="锁定状态" width="80">
        <template #default="scope">
          <el-popconfirm
            title="确认锁定该条记录，锁定将无法编辑?"
            @confirm="onFlowLock(scope.row)"
          >
            <template #reference>
              <el-button v-if="!scope.row.isLock" type="text" circle
                >锁定</el-button
              >
            </template>
          </el-popconfirm>
          <ElButton type="default" icon="Lock" link v-if="scope.row.isLock">
            已锁定
          </ElButton>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-tooltip content="模拟" placement="bottom" effect="light">
            <el-button type="text" @click="showFlowVersion(scope.row)"
              >模拟</el-button
            >
          </el-tooltip>

          <el-popconfirm
            title="确认删除该条记录?"
            @confirm="confirmDeleteItem(scope.row)"
          >
            <template #reference>
              <el-button
                v-if="!scope.row.isLock"
                type="text"
                icon="Delete"
                circle
              />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.maxResultCount"
      :page-sizes="[12, 20, 30, 50]"
      size="mini"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="onPageChange"
      @current-change="onPageChange"
    />
    <FlowDesignForm
      v-model:visible="editFlowDesignData.visible"
      v-model:value="editFlowDesignData.value"
      :view-only="editFlowDesignData.viewOnly"
    />

    <FlowVersionDrawer
      v-model:visible="flowVersionData.visible"
      :workflowId="flowVersionData.value.workflowId"
      :workflowName="flowVersionData.value.workflowName"
      :activeVersion="flowVersionData.value.activeVersion"
      :activeFormVersion="flowVersionData.value.activeFormVersion"
      @closed="getList"
    />
  </el-card>
</template>

<style></style>
